<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
  var status;
  function verify1(obj) {
    var span1 = document.getElementById("span1");
    if (obj.length < 6 || obj.length > 12) {
        span1.innerText = "用户名长度小于6位或大于12位";
        trueStyle(span1);
        return;
    }
    var code = obj.charCodeAt(0);
    if (code < 65 || 90 < code && code < 97 || code > 122) {
        span1.innerText = "用户名首字符必须是字母";
        trueStyle(span1);
        return;
    }
    falseStyle(span1);
  }
  function verify2(obj) {
    var span2 = document.getElementById("span2");
    if (obj.length < 6 || obj.length > 12) {
        span2.innerText = "密码长度小于6位或大于12位";
        trueStyle(span2);
        return;
    }
    falseStyle(span2);
  }
  function verify3(obj) {
    var span3 = document.getElementById("span3");
    if (obj.length < 6 || obj.length > 12) {
        span3.innerText = "密码长度小于6位或大于12位";
        trueStyle(span3);
        status = false;
        return;
    }
    var pwd = document.form1.pwd.value;
    if (pwd !== obj) {
        span3.innerText = "两次输入的密码不一致";
        trueStyle(span3);
        return;
    }
    falseStyle(span3);
  }
  function trueStyle(obj) {
    obj.style.color = "red";
    obj.style.display = "inline";
    status = false;
  }
  function falseStyle(obj) {
    obj.innerText = "";
    obj.style.color = "";
    obj.style.display = "none";
  }
</script>
</head>
<body>
  <form name="form1">
    <fieldset>
      <legend>注册</legend>
      <label>身份<input type="text" name="user" onblur="verify1(this.value)"></label>
      <span id="span1" style="display: none;"></span><br>
      <label>密码<input type="password" name="pwd" onblur="verify2(this.value)"></label>
      <span id="span2" style="display: none;"></span><br>
      <label>确认<input type="password" name="confirm" onblur="verify3(this.value)"></label>
      <span id="span3" style="display: none;"></span><br>
    </fieldset>
  </form>
</body>
</html>